<template>

<div>
<h2 style="color:cyan; margin-top: 15px;">深加工信息 &nbsp; <el-button type="primary" @click="open">设置</el-button></h2>
<br/>
<hr>
<el-form inline="true" >
   <el-form :inline="true" style="margin-top: 15px;margin-left: 15px;" class="demo-form-inline">
      &nbsp;<el-form-item label="班组">
      :{{ processcode.processingTeam }}
    </el-form-item>
        &nbsp; &nbsp; &nbsp;<el-form-item label="负责人">
      :{{ processcode.leader }}
    </el-form-item>
    <br/>
    
  </el-form>
</el-form>
 <el-dialog v-model="logic.isOpen" title="深加工信息" width="500" align-center draggable>
    <el-form label-width="120">
      <el-form-item label="班组" >
        <el-input v-model="process.processingTeam"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" >
        <el-input v-model="process.leader" autocomplete="off" />
      </el-form-item>
     
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.isOpen = false">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
   <el-dialog v-model="logic2.isOpen" title="企业信息" width="500" align-center draggable>
    <el-form label-width="120">
      <el-form-item label="公司名称" >
        <el-input v-model="commpanysession.companyName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生产许可证号" >
        <el-input v-model="commpanysession.licenseNum" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic2.isOpen = false">取消</el-button>
        <el-button type="primary" @click="saveNum">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
  <div>

    <div>
  <h2 style="color:cyan; margin-top: 15px;">食品安全信息</h2>
<br/>
<hr>
 <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
</div>
<div>
  <h2 style="color:cyan; margin-top: 15px;">供应商信息&nbsp; <el-button type="primary" @click="OpenProvider">设置</el-button></h2>
<br/>
<hr>
  <h3>原料</h3>
  生产批次：{{ProviderMent.productionBatch }}
  <h3>相关材料</h3>
    <hr>
     <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>


   <h3>辅料</h3>
  生产批次：{{ ProviderMent.productionBatch }}
  <h3>相关材料</h3>
    <hr>
     <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>


   <h3>添加剂</h3>
  生产批次：{{ ProviderMent.productionBatch }}
  <h3>相关材料</h3>
    <hr>
     <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

   <h3>包材</h3>
  生产批次：{{ ProviderMent.productionBatch}}
  <h3>相关材料</h3>
  <hr>
   <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="logic3.isOpen" title="供应商信息" width="500" align-center draggable>
    <el-form  :label-width="120">
     <el-form-item label="供应商信息类型">
      <el-radio-group v-model="ProviderArray.providerType">
        <el-radio :value="1">原料</el-radio>
        <el-radio :value="2">辅料</el-radio>
        <el-radio :value="3">添加剂</el-radio>
        <el-radio :value="4">包材</el-radio>
      </el-radio-group>
    </el-form-item>
      <el-form-item label="生产批次" >
        <el-input v-model="ProviderArray.productionBatch" autocomplete="off" />
      </el-form-item>
     
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic3.isOpen = false">取消</el-button>
        <el-button type="primary" @click="saveCode">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</div>


  <h2 style="color:cyan; margin-top: 15px;">企业信息 &nbsp; <el-button type="primary" @click="open2">设置</el-button></h2>
<br/>
<hr>
<el-form inline="true" >
   <el-form :inline="true" style="margin-top: 15px;margin-left: 15px;" class="demo-form-inline">
      &nbsp;<el-form-item label="公司名称">
      :{{ processcompany.companyName }}
    </el-form-item>
       <el-form-item label="生产许可证号">
      :{{ processcompany.licenseNum }}
    </el-form-item>
        

    <br/>
    
  </el-form>
</el-form>
</div>
<div>
  <h2 style="color:cyan; margin-top: 15px;">企业照片</h2>
<br/>
<hr>
 <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
</div>

</template>
<script lang="ts" setup>
import { reactive, ref, onMounted,watch } from 'vue'
import axios from 'axios'
import { useRouter,useRoute } from 'vue-router'
const router=useRouter();
const route=useRoute();
import { useCounterStore } from '@/stores/counter';
const store=useCounterStore();
import { type FormInstance, type FormRules,ElMessage,ElMessageBox } from 'element-plus'
onMounted(()=>{
  GetBreeding();
  GetFarming();
  GetProvider();
})

//逻辑对象
const logic=reactive({
isOpen:false,

})
//逻辑对象
const logic2=reactive({
isOpen:false,

})
//逻辑对象
const logic3=reactive({
isOpen:false,

})

//打开供应商信息对话框
const OpenProvider=()=>{
  logic3.isOpen=true;
  ProviderArray.providerType="";
  ProviderArray.productionBatch=""
}
//供应商信息
const ProviderArray=reactive({
  providerType:"",
  productionBatch:""
})
//保存供应商信息的方法
const saveCode=()=>{

axios.post("http://localhost:5219/api/Management/Addprovider",ProviderArray).then(res=>{
  if(res.data.code==200)
{
ElMessage.success(res.data.message);

logic3.isOpen = false
}
else
{
  ElMessage.error(res.data.message);
  return;
}
})
}
//显示供应商信息
const ProviderMent=ref<any>([])
const GetProvider=()=>{
  let productionBatch=route.query.productionBatch
  axios.get("http://localhost:5219/api/Management/Getprovider",{
    params:{
      productionBatch:productionBatch
    }
  }).then(res=>{
      ProviderMent.value=res.data.data;
  })
}

//深加工企业信息
const commpanysession=reactive({
   companyName:"",
   licenseNum:"",
   productionBatch:route.query.productionBatch
})
 

//打开深加工企业信息的对话框
const open2=()=>{
  logic2.isOpen=true;
  
}
//保存深加工企业信息的方法
const saveNum=()=>{

axios.post("http://localhost:5219/api/Management/AddDeepCompany",commpanysession).then(res=>{
  if(res.data.code==200)
{
ElMessage.success(res.data.message);

logic2.isOpen=false;
}
else
{
  ElMessage.error(res.data.message);
  return;
}
})
}
//显示深加工企业信息
const processcompany=ref<any>([])
const GetFarming=()=>{
  let productionBatch=route.query.productionBatch
  axios.get("http://localhost:5219/api/Management/GetDeeprocessCompany",{
    params:{
      productionBatch:productionBatch
    }
  }).then(res=>{
      processcompany.value=res.data.data;
  })
}
//深加工信息对象
const process=reactive({
  
  processingTeam: "",
  leader: "",
  productionBatch: route.query.productionBatch

})
//打开深加工信息对话框
const open=()=>{

  logic.isOpen=true;
  process.processingTeam="",
  process.leader=""


}
//新增深加工信息
const save=()=>{
  axios.post("http://localhost:5219/api/Management/AddProcessing",process).then(res=>{
    if(res.data.code==200)
  {
       ElMessage.success(res.data.message);
        logic.isOpen=false;
        GetBreeding();
  }
  else
  {
     ElMessage.error(res.data.message);
        return;
  }
  })

}
//显示深加工信息
const processcode=ref<any>([])
const GetBreeding=()=>{
  let productionBatch=route.query.productionBatch
  axios.get("http://localhost:5219/api/Management/GetProcessing",{
    params:{
      productionBatch:productionBatch
    }
  }).then(res=>{
      processcode.value=res.data.data;
  })
}
//关于图片
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import type { UploadFile } from 'element-plus'
import { isPx } from 'element-plus/es/components/splitter/src/hooks/useSize.mjs';

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>